<template>
  <view :class="['contact-container', `theme-${currentTheme}`]">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <view class="search-input-wrap">
        <uni-icons type="search" size="18" color="#999" />
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索联系人" 
          class="search-input"
        />
        <uni-icons 
          v-if="searchKeyword" 
          type="clear" 
          size="18" 
          color="#999" 
          @click="searchKeyword = ''"
        />
      </view>
    </view>

    <!-- 联系人列表 -->
    <view class="contact-list">
      <view 
        v-for="contact in filteredContacts" 
        :key="contact.id"
        class="contact-item"
        @tap="navigateToDetail(contact.id)"
      >
        <view class="avatar">
          <text>{{ contact.name.charAt(0) }}</text>
        </view>
        <view class="info">
          <text class="name">{{ contact.name }}</text>
          <view class="stats">
            <text class="stat receive">收礼: ¥{{ getContactReceive(contact.id) }}</text>
            <text class="stat give">送礼: ¥{{ getContactGive(contact.id) }}</text>
          </view>
        </view>
        <uni-icons type="right" size="16" color="#999999" />
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="filteredContacts.length === 0" class="empty-state">
      <view class="empty-icon">
        <text class="iconfont icon-empty"></text>
      </view>
      <text class="empty-text">暂无联系人</text>
    </view>

    <!-- 添加联系人按钮 -->
    <button class="add-button" @tap="navigateToAdd">
      添加联系人
    </button>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, watch } from 'vue';
import { useContactStore } from '@/store/modules/contact';
import { useThemeStore } from '@/store/modules/theme';
import { useGiftBookStore } from '@/store/modules/giftbook';
import useThemeMixin from '@/mixins/themeMixin';
import { GiftBook, GiftRecord } from '@/types/giftbook';

const contactStore = useContactStore();
const themeStore = useThemeStore();
const giftBookStore = useGiftBookStore();
const currentTheme = computed(() => themeStore.currentTheme);

// 使用主题mixin
useThemeMixin();

const searchKeyword = ref('');

// 联系人列表
const contacts = computed(() => contactStore.getAllContacts);

// 过滤后的联系人列表
const filteredContacts = computed(() => {
  const contacts = contactStore.getAllContacts;
  if (!searchKeyword.value) return contacts;
  
  const keyword = searchKeyword.value.toLowerCase();
  return contacts.filter((contact: { name: string }) => 
    contact.name.toLowerCase().includes(keyword)
  );
});

// 获取联系人收礼总额
const getContactReceive = (contactId: string) => {
  return giftBookStore.getContactReceiveAmount(contactId).toFixed(2);
};

// 获取联系人送礼总额
const getContactGive = (contactId: string) => {
  return giftBookStore.getContactGiveAmount(contactId).toFixed(2);
};

// 跳转到添加页面
const navigateToAdd = () => {
  uni.navigateTo({
    url: '/pages/contact/add'
  });
};

// 跳转到详情页面
const navigateToDetail = (id: string) => {
  console.log('【联系人列表】跳转到详情页, 联系人ID:', id);
  console.log('【联系人列表】当前联系人数据:', contactStore.getContactById(id));
  uni.navigateTo({
    url: `/pages/contact/detail?id=${id}`,
    success: () => {
      console.log('【联系人列表】跳转成功');
    },
    fail: (error) => {
      console.error('【联系人列表】跳转失败:', error);
    }
  });
};

// 监听礼簿数据变化
watch(() => giftBookStore.getAllGiftBooks, () => {
  // 强制重新计算联系人列表，以更新收礼和送礼金额
  contacts.value;
}, { deep: true });

// 生命周期
onMounted(async () => {
  await Promise.all([
    contactStore.loadContacts(),
    giftBookStore.loadFromStorage()
  ]);
});
</script>

<style lang="scss">
.contact-container {
  min-height: 100vh;
  padding: 20rpx;
  background-color: var(--background-color);
  transition: all 0.3s ease;
  padding-bottom: 120rpx;

  &.theme-wedding {
    --primary-color: #FF4D4F;
    --primary-dark: #FF1F1F;
    --primary-light: #FFE5E5;
  }

  &.theme-funeral {
    --primary-color: #2c3e50;
    --primary-dark: #1a2634;
    --primary-light: #F5F5F5;
  }

  &.theme-birthday {
    --primary-color: #FF4D4F;
    --primary-dark: #FF1F1F;
    --primary-light: #FFE5E5;
  }

  &.theme-graduation {
    --primary-color: #1890FF;
    --primary-dark: #096DD9;
    --primary-light: #E6F7FF;
  }

  &.theme-business {
    --primary-color: #722ED1;
    --primary-dark: #531DAB;
    --primary-light: #F9F0FF;
  }

  &.theme-housewarming {
    --primary-color: #52C41A;
    --primary-dark: #389E0D;
    --primary-light: #F6FFED;
  }

  &.theme-fullmoon {
    --primary-color: #F759AB;
    --primary-dark: #EB2F96;
    --primary-light: #FFF0F6;
  }

  &.theme-other {
    --primary-color: #13C2C2;
    --primary-dark: #08979C;
    --primary-light: #E6FFFB;
  }

  .search-bar {
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    
    .search-input-wrap {
      display: flex;
      align-items: center;
      background-color: #fff;
      padding: 16rpx 24rpx;
      border-radius: 40rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

      .search-input {
        flex: 1;
        margin: 0 20rpx;
        font-size: 28rpx;
        color: #333;

        &::placeholder {
          color: #999;
        }
      }
    }
  }

  .contact-list {
    .contact-item {
      display: flex;
      align-items: center;
      padding: 24rpx;
      background-color: #fff;
      border-radius: 12rpx;
      margin-bottom: 20rpx;
      box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.99);
      }

      .avatar {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        background-color: var(--primary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 20rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);

        text {
          color: #FFFFFF;
          font-size: 32rpx;
          font-weight: bold;
        }
      }

      .info {
        flex: 1;
        display: flex;
        flex-direction: column;

        .name {
          font-size: 34rpx;
          color: #333;
          margin-bottom: 8rpx;
          font-weight: bold;
        }

        .stats {
          display: flex;
          gap: 24rpx;

          .stat {
            font-size: 26rpx;
            padding: 4rpx 12rpx;
            border-radius: 6rpx;
            
            &.receive {
              color: #67c23a !important;
              background-color: rgba(103, 194, 58, 0.1);
            }
            
            &.give {
              color: #f56c6c !important;
              background-color: rgba(245, 108, 108, 0.1);
            }
          }
        }
      }
    }
  }

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100rpx 0;

    .empty-icon {
      margin-bottom: 20rpx;
      
      .iconfont {
        font-size: 96rpx;
        color: #999;
      }
    }

    .empty-text {
      font-size: 28rpx;
      color: #999;
    }
  }

  .add-button {
    position: fixed;
    bottom: 40rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background-color: var(--primary-color);
    color: #FFFFFF;
    font-size: 32rpx;
    border-radius: 45rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-weight: bold;
    
    &:active {
      background-color: var(--primary-dark);
      transform: translateX(-50%) scale(0.98);
      box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.15);
    }
  }
}
</style> 